<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item to="/auth/permissionlist">权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限分配</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>
        
        <div class="box">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <h3 style="line-height:32px;">
                            <i class="el-icon-s-tools"></i> &nbsp; 管理信息
                        </h3>
                    </div>
                </el-col>
            </el-row>
            <div class="divider"></div>
            
            <el-row class="whererow">
                <p class="label">商品管理：</p>
                <el-col :span="24">
                    <el-checkbox-group v-model="checked">
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row class="whererow">
                <p class="label">商品管理：</p>
                <el-col :span="24">
                    <el-checkbox-group v-model="checked">
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row class="whererow">
                <p class="label">商品管理：</p>
                <el-col :span="24">
                    <el-checkbox-group v-model="checked">
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                        <el-checkbox label="商品-商品管理-读取">商品-商品管理-读取</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </div>

        <div class="divider"></div>
        
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>

    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: [],
            cresource: {},
            addDialogVisible: false,
            editDialogVisible: false,
            roleDialogVisible: false,
            search: '',
            selectRoles: '',

            currentPage: 3,
            input: '',
            value: '',
            options: [{
                value: 'enable',
                label: '启用'
            },{
                value: 'disable',
                label: '禁用'
            }],
            tableData: [{
                id: '01',
                name: '资源名称',
                value: '/product/xxx',
                description: '资源描述',
                gmtCreate: '2011-11-11 11:11:11'
            },{
                id: '01',
                name: '资源名称',
                value: '/product/xxx',
                description: '资源描述',
                gmtCreate: '2011-11-11 11:11:11'
            },{
                id: '01',
                name: '资源名称',
                value: '/product/xxx',
                description: '资源描述',
                gmtCreate: '2011-11-11 11:11:11'
            },{
                id: '01',
                name: '资源名称',
                value: '/product/xxx',
                description: '资源描述',
                gmtCreate: '2011-11-11 11:11:11'
            },]
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
}
</script>
